Why Profiler ?

Profiler 可以用來測量 React app render 的次數，以及 render 所花費的成本，不過在 production build 當中會被停用，所以如果要針對 production，要使用另外一套工具。

應用場景與方法

Profiler 可以被放在 React tree 的任何一處，他需要 id 跟 onRender callback 的傳入（當元件 commit 一個更新的時候，會被觸發）。以下是使用的案例：

// 以下案例裡，我們要 profile Navigation 這個元件
render(
  <App>
		// Profiler 須要傳入 id 與 callback function，更詳細的傳入值規定請見下方
    <Profiler id="Navigation" onRender={callback}>
      <Navigation {...props} />
    </Profiler>
		// 使用 Profiler 把要驗證的元件包住
    <Main {...props} />
  </App>
);

如果你需要，Profiler 也可以有多個、被放置在不同地方：

render(
  <App>
		// 這是導覽列的 Profiler
    <Profiler id="Navigation" onRender={callback}>
      <Navigation {...props} />
    </Profiler>
	 // 這是主要區塊的 Profiler
    <Profiler id="Main" onRender={callback}>
      <Main {...props} />
    </Profiler>
  </App>
);

關於 onRender callback

onRender callback function 可以接收許多參數，與描述被 render 的物件，以及他所花費的時間相關。

function onRenderCallback(
  id, // 剛剛被 commit 出去的 id prop
  phase, // 他在哪一個階段？mount 還是 update？
  actualDuration, // render commit 出去的更新所花費的時間
  baseDuration, // render 出整個 subtree 而不包含 memoization 所花費的估計時間
  startTime, // React 開始 render 更新的時間點
  commitTime, // React 開始 commit 這個 update 的時間點
  interactions // 一系列歸屬於這個 update 的交互行為
) {
	// 可以在這裡 log 出 render 時間之類的
}

假設如果我要測試自己 memoization 的實作成績，就可以依靠以下兩個參數來做比較：

actualDuration —— 這個值會暗示出 subtree 運用 memoization 方法的效率。比較理想的情況下，這個值應該要在初始 mount 之後顯著的下降（因為許多下層的元件只需要在特殊的 props 更改的時候才會需要 rerender。

baseDuration —— 這個值估算出了 rendering 的最糟狀況下（沒有任何 memoization），要花費多少時間。

References
React profiler